<template>
  <view>
    <view class="my_information">
      <!-- 头像 -->
      <view class="information_container">
        <view class="information_describe">头像</view>
        <view class="information_img">
          <image :src="userinfo.userAvatar" mode="aspectFill"></image>
        </view>
      </view>
      <!-- 昵称 -->
      <view class="information_container">
        <view class="information_describe">昵称</view>
        <view class="information_content">{{userinfo.userName}}</view>
      </view>
      <!-- 性别 -->
      <view class="information_container">
        <view class="information_describe">性别</view>
        <view class="information_content" v-if="userinfo.userGender">{{userinfo.userGender}}</view>
      </view>
      <!-- 体重 -->
      <view class="information_container">
        <view class="information_describe">体重</view>
        <view class="information_content" v-if="userinfo.userWeight">{{userinfo.userWeight}}</view>
      </view>
      <!-- 体脂率 -->
      <view class="information_container">
        <view class="information_describe">体脂率</view>
        <view class="information_content" v-if="userinfo.userBMI">{{userinfo.userBMI}}</view>
      </view>
      <!-- 邮箱 -->
      <view class="information_container">
        <view class="information_describe">邮箱</view>
        <view class="information_content" v-if="userinfo.userEmail">{{userinfo.userEmail}}</view>
      </view>
      <!-- 手机号 -->
      <view class="information_container">
        <view class="information_describe">手机号</view>
        <view class="information_content" v-if="userinfo.userPhoneNumber">{{userinfo.userPhoneNumber}}</view>
      </view>
      <!-- 所在地 -->
      <view class="information_container">
        <view class="information_describe">所在地</view>
        <view class="information_content" v-if="userinfo.userRegion">{{userinfo.userRegion}}</view>
      </view>
      <button class="information_modify" @click="gotoModify">修改资料</button>
    </view>


  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {

      };
    },
    computed: {
      ...mapState('m_user', ['userinfo'])
    },
    methods: {
      // 点击跳转到资料修改页面
      gotoModify() {
        uni.navigateTo({
          url: '../../subpkg/my_modify_information/my_modify_information'
        })
      }
    }
  }
</script>

<style lang="scss">
  .my_information {
    width: 675rpx;
    margin: 50rpx auto 10rpx auto;
    border-radius: 15rpx;
    box-shadow: 0px 0.5px 4px 0.1px #f7f9ff;

    .information_container {
      display: flex;
      flex-direction: row;
      padding: 20rpx 20rpx 20rpx 35rpx;
      line-height: 60rpx;
      border-bottom: 1px solid #efefef;
      height: 60rpx;
      background-color: #fff;

      .information_img {
        flex: 1;
        text-align: right;
        float: right;

        image {
          width: 50rpx;
          height: 50rpx;
          margin-top: 20rpx;
        }
      }

      .information_content {
        flex: 1;
        text-align: right;
        float: right;
        margin-right: 6rpx;
        font-size: 28rpx;
        line-height: 60rpx;
        height: 60rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 10rpx;
      }
    }

    .information_container:last-child {
      border: none;
    }

    .information_modify {
      width: 675rpx;
      color: white;
      margin-top: 20rpx;
      font-size: 30rpx;
      background-color: #fba007;
    }
  }
</style>